﻿@{
    Layout = null;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="~/Content/Admin/screen.css" type="text/css" media="screen" title="default" />
    <script src="~/Scripts/jquery-2.0.3.js" type="text/javascript"></script>
    <link href="~/Content/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    
    <!-- Custom jquery scripts -->
    <script src="~/Scripts/custom_jquery.js" type="text/javascript"></script>
    <style type="text/css">
        .custom-combobox-toggle {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
            /* support: IE7 */
            *height: 1.7em;
            *top: 0.1em;
        }
    </style>
</head>
<body>
    <!-- Start: page-top-outer -->
    <div id="page-top-outer">

        <!-- Start: page-top -->
        <div id="page-top">

            <!-- start logo -->
            <div id="logo">
                <a href="">
                    <img src="~/Images/Admin/shared/logo.png" width="156" height="40" alt="" /></a>
            </div>
            <!-- end logo -->

            <!--  start top-search -->
            <div id="top-search">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <input type="text" value="Search" onblur="if (this.value=='') { this.value='Search'; }" onfocus="if (this.value=='Search') { this.value=''; }" class="top-search-inp" /></td>
                        <td>
                            <select class="styledselect">
                                <option value="" selected="selected">Tất Cả</option>
                                <option value="">Sản Phẩm</option>
                                <option value="">Nhóm Sản Phẩm</option>
                                <option value="">Khách Hàng</option>
                                <option value="">Tin Tức</option>
                            </select>
                        </td>
                        <td>
                            <input type="image" src="~/Images/Admin/shared/top_search_btn.gif" />
                        </td>
                    </tr>
                </table>
            </div>
            <!--  end top-search -->
            <div class="clear"></div>

        </div>
        <!-- End: page-top -->

    </div>
    <!-- End: page-top-outer -->

    <div class="clear">&nbsp;</div>

    <!--  start nav-outer-repeat................................................................................................. START -->
    <div class="nav-outer-repeat">
        <!--  start nav-outer -->
        <div class="nav-outer">

            <!-- start nav-right -->
            <div id="nav-right">

                <div class="nav-divider">&nbsp;</div>
                <div class="showhide-account">
                    <img src="~/Images/Admin/shared/nav/nav_myaccount.gif" width="93" height="14" alt="" />
                </div>
                <div class="nav-divider">&nbsp;</div>
                <a href="" id="logout">
                    <img src="~/Images/Admin/shared/nav/nav_logout.gif" width="64" height="14" alt="" /></a>
                <div class="clear">&nbsp;</div>

                <!--  start account-content -->
                <div class="account-content">
                    <div class="account-drop-inner">
                        <a href="" id="acc-settings">Settings</a>
                        <div class="clear">&nbsp;</div>
                        <div class="acc-line">&nbsp;</div>
                        <a href="" id="acc-details">Personal details </a>
                        <div class="clear">&nbsp;</div>
                        <div class="acc-line">&nbsp;</div>
                        <a href="" id="acc-project">Project details</a>
                        <div class="clear">&nbsp;</div>
                        <div class="acc-line">&nbsp;</div>
                        <a href="" id="acc-inbox">Inbox</a>
                        <div class="clear">&nbsp;</div>
                        <div class="acc-line">&nbsp;</div>
                        <a href="" id="acc-stats">Statistics</a>
                    </div>
                </div>
                <!--  end account-content -->

            </div>
            <!-- end nav-right -->


            <!--  start nav -->
            <div class="nav">
                <div class="table">
                    @Html.Action("_MenuChinh", "Layout")
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <!--  start nav -->

        </div>
        <div class="clear"></div>
        <!--  start nav-outer -->
    </div>
    <!--  start nav-outer-repeat................................................... END -->

    <div class="clear"></div>

    <!-- start content-outer ........................................................................................................................START -->
    <div id="content-outer" style="margin: auto;">
        <!-- start content -->
        <div id="content">
            <!--  start page-heading -->
            <div id="page-heading">
                <h1>@ViewBag.Title</h1>
            </div>
            <!-- end page-heading -->

            <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
                <tr>
                    @*    <th rowspan="3" class="sized">
                        <img src="~/Images/Admin/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>*@
                    <th class="topleft"></th>
                    <td id="tbl-border-top">&nbsp;</td>
                    <th class="topright"></th>
                    @*<th rowspan="3" class="sized">
                        <img src="~/Images/Admin/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>*@
                </tr>
                <tr>
                    <td id="tbl-border-left"></td>
                    <td>
                        <!--  start content-table-inner ...................................................................... START -->
                        <div id="content-table-inner">

                            <!--  start table-content  -->
                            <div id="table-content">
                                @*   <h2>Sub Heading </h2>
                                <h3>Local Heading</h3>*@
                                @RenderBody()
                            </div>
                            <!--  end table-content  -->
                            <div class="clear"></div>
                        </div>
                        <!--  end content-table-inner ............................................END  -->
                    </td>
                    <td id="tbl-border-right"></td>
                </tr>
                <tr>
                    <th class="sized bottomleft"></th>
                    <td id="tbl-border-bottom">&nbsp;</td>
                    <th class="sized bottomright"></th>
                </tr>
            </table>
            <div class="clear">&nbsp;</div>

        </div>
        <!--  end content -->
        <div class="clear">&nbsp;</div>
    </div>
    <!--  end content-outer........................................................END -->

    <div class="clear">&nbsp;</div>

    <!-- start footer -->
    @* <div id="footer">
        <!-- <div id="footer-pad">&nbsp;</div> -->
        <!--  start footer-left -->
        <div id="footer-left">
            Admin Skin &copy; Copyright Internet Dreams Ltd. <a href="">www.netdreams.co.uk</a>. All rights reserved.
        </div>
        <!--  end footer-left -->
        <div class="clear">&nbsp;</div>
    </div>*@
    <!-- end footer -->
    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.widget("custom.combobox", {
                _create: function () {
                    this.wrapper = $("<span>")
                        .addClass("custom-combobox")
                        .insertAfter(this.element);

                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },

                _createAutocomplete: function () {
                    var selected = this.element.children(":selected"),
                        value = selected.val() ? selected.text() : "";

                    this.input = $("<input>")
                        .appendTo(this.wrapper)
                        .val(value)
                        .attr("title", "")
                        .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: $.proxy(this, "_source")
                        })
                        .tooltip({
                            tooltipClass: "ui-state-highlight"
                        });

                    this._on(this.input, {
                        autocompleteselect: function (event, ui) {
                            ui.item.option.selected = true;
                            this._trigger("select", event, {
                                item: ui.item.option
                            });
                        },

                        autocompletechange: "_removeIfInvalid"
                    });
                },

                _createShowAllButton: function () {
                    var input = this.input,
                        wasOpen = false;

                    $("<a>")
                        .attr("tabIndex", -1)
                        .attr("title", "Show All Items")
                        .tooltip()
                        .appendTo(this.wrapper)
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                        .removeClass("ui-corner-all")
                        .addClass("custom-combobox-toggle ui-corner-right")
                        .mousedown(function () {
                            wasOpen = input.autocomplete("widget").is(":visible");
                        })
                        .click(function () {
                            input.focus();

                            // Close if already visible
                            if (wasOpen) {
                                return;
                            }

                            // Pass empty string as value to search for, displaying all results
                            input.autocomplete("search", "");
                        });
                },

                _source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(this.element.children("option").map(function () {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }));
                },

                _removeIfInvalid: function (event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
                        valueLowerCase = value.toLowerCase(),
                        valid = false;
                    this.element.children("option").each(function () {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input
                        .val("")
                        .attr("title", value + " didn't match any item")
                        .tooltip("open");
                    this.element.val("");
                    this._delay(function () {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.data("ui-autocomplete").term = "";
                },

                _destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })(jQuery);

        $(function () {
            $("#combobox").combobox();
            //$("#toggle").click(function () {
            //    $("#combobox").toggle();
            //});
        });
    </script>
    @RenderSection("scripts", required: false)
</body>
</html>
